/**
 * 火花输入界面组件
 * 用户输入创作灵感的起始界面
 */

import React, { useState } from 'react'
import { Input, Button, Card, Typography, Space } from 'antd'
import { FireOutlined, BulbOutlined } from '@ant-design/icons'

const { TextArea } = Input
const { Title, Paragraph } = Typography

export interface SparkInputProps {
  onSparkSubmit: (sparkInput: string) => void
  isLoading?: boolean
}

const SparkInput: React.FC<SparkInputProps> = ({
  onSparkSubmit,
  isLoading = false
}) => {
  const [sparkInput, setSparkInput] = useState('')

  const handleSubmit = () => {
    if (sparkInput.trim()) {
      onSparkSubmit(sparkInput.trim())
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
      handleSubmit()
    }
  }

  return (
    <div className="spark-input-container">
      {/* 欢迎标题 */}
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <FireOutlined style={{ fontSize: 32, color: '#ff6b35', marginBottom: 8 }} />
        <Title level={3} style={{ margin: 0, color: '#333' }}>
          点燃创作火花
        </Title>
        <Paragraph style={{ color: '#666', marginBottom: 0 }}>
          分享您的创作想法，让AI帮您完成专业的文章创作
        </Paragraph>
      </div>

      {/* 输入区域 */}
      <Card
        title={
          <Space>
            <BulbOutlined />
            <span>描述您的创作灵感</span>
          </Space>
        }
        style={{ marginBottom: 16 }}
      >
        <TextArea
          value={sparkInput}
          onChange={(e) => setSparkInput(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="请描述您想要创作的内容主题或想法..."
          className="spark-input-textarea"
          maxLength={500}
          autoSize={{ minRows: 4, maxRows: 8 }}
        />

        <div style={{
          marginTop: 12,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <div style={{ fontSize: 12, color: '#999' }}>
            提示：按 Ctrl+Enter 或 ⌘+Enter 快速提交
          </div>
          <div style={{ fontSize: 12, color: '#999' }}>
            {sparkInput.length} / 500
          </div>
        </div>

        <div style={{ marginTop: 12, textAlign: 'right' }}>
          <Button
            type="primary"
            size="large"
            onClick={handleSubmit}
            loading={isLoading}
            disabled={!sparkInput.trim()}
            icon={<FireOutlined />}
          >
            开始创作火花
          </Button>
        </div>
      </Card>
    </div>
  )
}

export default SparkInput